<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--父组件-->
<div id="app">
  <cpn @btn-click="btnClick"></cpn>
</div>

<!--子组件-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  //1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 1, name: '手机'},
          {id: 2, name: '电脑'},
          {id: 3, name: '笔记本'},
          {id: 4, name: '鼠标'}
        ]
      }
    },
    methods: {
      btnClick(item) {
        return this.$emit('btn-click', item)
      }
    }
  }
  const app = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick(item) {
        console.log('btn-click', item);
      }
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html>
